
<template>
    <div>
        <el-table ref="multipleTableRef" :data="data" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column prop="sysid" label="序号" />
            <el-table-column prop="systemname" label="职位名称" />
            <el-table-column prop="systemdepart" label="关联部门" />
            <el-table-column prop="systemlevel" label="权限等级" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.systemstate" /></template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="editCustomer(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination :page-size="pageSize" :page-sizes="[pageSize, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="page"
                @current-change="changePage" background @size-change="updatePageSize" style="width:100%" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { usePermissionList } from "../hooks";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";

interface IProps {
    pageSize: number
    page: number
    total: number
    data: ISystemData.IPermission[]
    loadData: (page: number, pageSize: number) => void
}
const props = defineProps<IProps>()

const route = useRoute()
const router = useRouter()


const changePage = (page: number) => {
    console.log(page)
    props.loadData(page, props.pageSize)
    const query = { ...route.query, page }
    router.replace({ query })
}
const updatePageSize = (pageSize: number) => {
    props.loadData(props.page, pageSize)
    const query = { ...route.query, pageSize }
    router.replace({ query })
};


const emit = defineEmits<{
    onSelectPerData: [data: ISystemData.IPermission[]]
    systemedit: [id: number, item: number]
}>()
//编辑
const editCustomer = (row: ISystemData.IPermission) => {
    emit('systemedit', row.sysid!, 10)
};
//全选
const selectNumber = ref<number>(0)

const handleSelectionChange = (val: ISystemData.IPermission[]) => {
    const selectedId: number[] = val
        .filter(item => item.sysid !== undefined)
        .map(item => item.sysid!);
    selectNumber.value = selectedId.length
    const selectedData: ISystemData.IPermission[] = val
        .filter(item => selectedId.includes(item.sysid!));
    console.log(selectedData);


    emit('onSelectPerData', selectedData)

}
</script>

<style lang="scss" scoped></style>
